/*
 * Copyright(C) 2019 FUYUN DATA SERVICES CO.,LTD. - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * 该源代码版权归属福韵数据服务有限公司所有
 * 未经授权，任何人不得复制、泄露、转载、使用，否则将视为侵权
 *
 */

import * as React from "react";
import { connect } from "react-redux";
import { IRootState, Dispatch } from "../../../../store";
import { Form, Input, Button, Select, DatePicker, InputNumber } from "antd";

import { FormComponentProps } from "antd/lib/form";
import TextArea from "antd/lib/input/TextArea";
import locale from "antd/lib/date-picker/locale/zh_CN";
import moment from "moment";

const mapStateToProps = ({ goods, product, loading }: IRootState) => ({
  goods,
  product,
  loading: loading.effects.goods.getGoodsList as any
});
const mapDispatchToProps = ({ goods, product }: Dispatch) => ({
  saveGoods: (payload: any) => goods.saveGoods(payload),
  getProductList: (payload: any) => product.getProductList(payload)
});

type connectedProps = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>;

interface IState {
  edit: boolean;
  selectValue: any;
  children: any;
  selectTime: any;
}

interface IProps extends connectedProps {
  edit: boolean;
  userData: any;
}

class GoodsAdd extends React.Component<IProps & FormComponentProps, IState> {
  public state = {
    edit: false,
    selectValue: "",
    children: [],
    selectTime: ""
  };

  public componentDidMount = async () => {
    const { getProductList } = this.props;
    await getProductList({
      size: "1000",
      name: ""
    });

    const { productList } = this.props.product;
    const cArray: any = [];
    productList.map(v => {
      cArray.push(<Select.Option key={v.id}>{v.name}</Select.Option>);
    });
    this.setState({
      children: cArray
    });
  };

  public handleOk = (e: any) => {
    const { saveGoods } = this.props;
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        saveGoods(values);
      }
    });
  };

  public handleChange = (value: any, option: any) => {
    const text = option.props.children;
    this.setState({
      selectValue: text
    });
  };

  public timeChange = (date: any, dateString: any) => {
    const res = moment(dateString, "YYYY-MM-DD HH:mm:ss").valueOf();
    this.setState({
      selectTime: res
    });
  };

  public render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div style={{ paddingTop: "20px" }}>
        <Form>
          <Form.Item
            label={"产品名称"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
          >
            {getFieldDecorator("proId", {
              initialValue: "",
              rules: [
                {
                  required: true,
                  message: "请选择产品"
                }
              ]
            })(
              <Select
                size="default"
                placeholder="请选择产品"
                onChange={this.handleChange}
                style={{ width: "100%" }}
              >
                {this.state.children}
              </Select>
            )}
          </Form.Item>

          <Form.Item
            label={"产品名称"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
            style={{ display: "none" }}
          >
            {getFieldDecorator("product", {
              initialValue: this.state.selectValue,
              rules: [
                {
                  required: true,
                  message: "产品id"
                }
              ]
            })(<Input disabled={this.state.edit} />)}
          </Form.Item>
          <Form.Item
            label={"商品名称"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
          >
            {getFieldDecorator("name", {
              initialValue: "",
              rules: [
                {
                  required: true,
                  message: "请填写商品名称"
                }
              ]
            })(<Input disabled={this.state.edit} />)}
          </Form.Item>

          <Form.Item
            label={"商品批次"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
          >
            {getFieldDecorator("productBatch", {
              initialValue: "",
              rules: [
                {
                  required: true,
                  message: "请填写商品批次"
                }
              ]
            })(<InputNumber min={0} style={{ width: "100%" }} />)}
          </Form.Item>
          <Form.Item
            label={"生产时间"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
          >
            {getFieldDecorator("tempTime", {
              initialValue: null,
              rules: [
                {
                  required: true,
                  message: "请选择生产时间"
                }
              ]
            })(
              <DatePicker
                placeholder="请选择生产时间"
                onChange={this.timeChange}
                locale={locale}
              />
            )}
          </Form.Item>

          <Form.Item
            label={"生产时间"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
            style={{ display: "none" }}
          >
            {getFieldDecorator("productionTime", {
              initialValue: this.state.selectTime,
              rules: [
                {
                  required: true,
                  message: "请选择生产时间"
                }
              ]
            })(<Input />)}
          </Form.Item>
          <Form.Item
            label={"产品规格"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
          >
            {getFieldDecorator("spec", {
              initialValue: "",
              rules: [
                {
                  required: true,
                  message: "请填写产品规格"
                }
              ]
            })(<TextArea rows={10} cols={10} />)}
          </Form.Item>
        </Form>

        <div style={{ textAlign: "center" }}>
          <Button
            type="primary"
            style={{ marginRight: "20px", marginBottom: "20px" }}
            onClick={this.handleOk}
          >
            保存
          </Button>
          {/* <Button type="default">关闭</Button> */}
        </div>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create<IProps & FormComponentProps>({})(GoodsAdd));
